<template>
	<div class="detail abs full overflow-hidden">
		<swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
			<!-- slides -->
			<swiper-slide>
				<div class="rel full overflow-hidden">
					<product-header :detail="detail.INSURANCE" v-if="detail.INSURANCE && detail.INSURANCE.PRODUCT_ID"></product-header>
					<div class="abs circle-bg"></div>
					<transition name="enter-fade-slowly">
						<div class="abs hint" v-show="detail.INSURANCE">
							<div class="rel">
								<span class="color green"></span>
								<span class="break" v-if="detail && detail.INSURANCE"> {{ detail.INSURANCE.PRODUCT_NAME | more(32) }}</span><br/>
								<span class="color purple"></span>
								<span class="">在售产品平均评分</span>
							</div>
						</div>
					</transition>
					<div id="myChart" ref="myChart" style="width: 5.54rem; height: 6.64rem; margin: 1.1rem auto 0;" :class="drawComplete?'scale':''"></div>
					<div v-show="detail.INSURANCE">
						<transition name="pop1">
							<div class="price_friendliness lab" @click="activateScore(3,true)" v-show="detail.INSURANCE">价格友好度</div>
						</transition>
						<transition name="pop2">
							<div class="insurance_rating lab" @click="activateScore(6,true)" v-show="detail.INSURANCE">保险公司评分</div>
						</transition>
						<transition name="pop3">
							<div class="disease_friendlines lab" @click="activateScore(1,true)" v-show="detail.INSURANCE">疾病定义友好度</div>
						</transition>
						<transition name="pop4">
							<div class="policy_liability lab" @click="activateScore(2,true)" v-show="detail.INSURANCE">保单责任友好度</div>
						</transition>
						<transition name="pop5">
							<div class="policy_management lab" @click="activateScore(5,true)" v-show="detail.INSURANCE">保单管理友好度</div>
						</transition>
						<transition name="pop6">
							<div class="service_friendliness lab" @click="activateScore(4,true)" v-show="detail.INSURANCE">服务方式友好度</div>
						</transition>
						<transition name="enter-fade-slowly">
							<div class="arrow1" v-show="detail.INSURANCE"></div>
						</transition>
						<transition name="enter-fade-slowly">
							<div class="arrow2" v-show="detail.INSURANCE"></div>
						</transition>
						<transition name="enter-fade-slowly">
							<div class="arrow3" v-show="detail.INSURANCE"></div>
						</transition>
						<transition name="enter-fade-slowly">
							<div class="arrow4" v-show="detail.INSURANCE"></div>
						</transition>
						<transition name="enter-fade-slowly">
							<div class="arrow5" v-show="detail.INSURANCE"></div>
						</transition>
						<transition name="enter-fade-slowly">
							<div class="arrow6" v-show="detail.INSURANCE"></div>
						</transition>
					</div>
				</div>
				<div class="abs middle next-page">
					<div class="rel">
						<div class="abs middle arrow-top"></div>
						<div class="abs middle arrow-bot"></div>
					</div>
				</div>
			</swiper-slide>
			<swiper-slide>
				<div class="rel full overflow-hidden">
					<product-header :detail="detail.INSURANCE" v-if="detail.INSURANCE && detail.INSURANCE.PRODUCT_ID"></product-header>
					<div class="abs block block1" :class="clicked>=1&&clicked<=3?'active':clicked>0?'fade':''">
						<div class="rel block1">
							<div class="abs title title1" :class="clicked>0?'fade':''"></div>
							<div class="abs score score1" @click="activateScore(1)" :class="clicked>0&&clicked==1?'active':clicked!=0?'fade':''">
								<div class="rel">
									<p class="abs rank"><span v-text="detail.DISEASE_DEFINITION?detail.DISEASE_DEFINITION.SCORE:''"></span><span class="tail">分</span></p>
									<p class="abs score-title">疾病定义</p>
									<div class="abs full border1"></div>
									<div class="abs full border2"></div>
									<div class="abs full border3"></div>
									<div class="abs full border4"></div>
									<div class="abs full bubble"></div>
								</div>
							</div>
							<div class="abs score score2" @click="activateScore(2)" :class="clicked>0&&clicked==2?'active':clicked!=0?'fade':''">
								<div class="rel">
									<p class="abs rank"><span v-text="detail.POLICY_LIABILITY?detail.POLICY_LIABILITY.SCORE:''"></span><span class="tail">分</span></p>
									<p class="abs score-title">保单责任</p>
									<div class="abs full border1"></div>
									<div class="abs full border2"></div>
									<div class="abs full border3"></div>
									<div class="abs full border4"></div>
									<div class="abs full bubble"></div>
								</div>
							</div>
							<div class="abs score score3" @click="activateScore(3)" :class="clicked>0&&clicked==3?'active':clicked!=0?'fade':''">
								<div class="rel">
									<p class="abs rank"><span></span>-<span class="tail"></span></p>
									<p class="abs score-title">产品价格</p>
									<div class="abs full border1"></div>
									<div class="abs full border2"></div>
									<div class="abs full border3"></div>
									<div class="abs full border4"></div>
									<div class="abs full bubble"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="abs block block2" :class="clicked>=4&&clicked<=6?'active':clicked>0?'fade':''">
						<div class="rel block2">
							<div class="abs title title2" :class="clicked>0?'fade':''"></div>
							<div class="abs score score4" @click="activateScore(4)" :class="clicked>0&&clicked==4?'active':clicked!=0?'fade':''">
								<div class="rel">
									<p class="abs rank"><span v-text="detail.SERVICE_MODE?detail.SERVICE_MODE.SCORE:''"></span><span class="tail">分</span></p>
									<p class="abs score-title">服务方式</p>
									<div class="abs full border1"></div>
									<div class="abs full border2"></div>
									<div class="abs full border3"></div>
									<div class="abs full border4"></div>
									<div class="abs full bubble"></div>
								</div>
							</div>
							<div class="abs score score5" @click="activateScore(5)" :class="clicked>0&&clicked==5?'active':clicked!=0?'fade':''">
								<div class="rel">
									<p class="abs rank"><span v-text="detail.POLICY_MANAGEMENT?detail.POLICY_MANAGEMENT.SCORE:''"></span><span class="tail">分</span></p>
									<p class="abs score-title">保单管理</p>
									<div class="abs full border1"></div>
									<div class="abs full border2"></div>
									<div class="abs full border3"></div>
									<div class="abs full border4"></div>
									<div class="abs full bubble"></div>
								</div>
							</div>
							<div class="abs score score6" @click="activateScore(6)" :class="clicked>0&&clicked==6?'active':clicked!=0?'fade':''">
								<div class="rel">
									<p class="abs rank"><span v-text="detail.INSURANCE_COMPANY?detail.INSURANCE_COMPANY.SCORE:''"></span><span class="tail">分</span></p>
									<p class="abs score-title">保险公司</p>
									<div class="abs full border1"></div>
									<div class="abs full border2"></div>
									<div class="abs full border3"></div>
									<div class="abs full border4"></div>
									<div class="abs full bubble"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="abs popular" :class="clicked>0?'fade':''" v-show="popular.length">
						<p class="title">搜了又搜</p>
						<div class="inline-block popular-item" v-for="item in popular" @click="goToDetail(item.insuranceId)">
							{{ item.insuranceName | more(22)}}
						</div>
					</div>
					<div class="abs middle next-page" v-show="clicked==0">
						<div class="rel">
							<div class="abs middle arrow-top"></div>
							<div class="abs middle arrow-bot"></div>
						</div>
					</div>
					<div class="abs circle-bg"></div>
				</div>
			</swiper-slide>
			<swiper-slide>
				<div class="rel full overflow-hidden">
					<product-header :detail="detail.INSURANCE" v-if="detail.INSURANCE && detail.INSURANCE.PRODUCT_ID"></product-header>
					<div class="abs comment-title">
						<span>用户点评</span>
						<span v-if="totalRow>0">（<span v-text="totalRow"></span>）</span>
					</div>
					<div class="abs comments">
						<div class="rel" ref="commentsContainer" :style="'height:'+commentsHeight+'rem;'">
							<div class="rel" ref="commentsChild">
								<div class="comment-item" v-for="comment in comments">
									<img :src="comment.customer.avatarUrl" class="user-avatar">
									<div class="user-name" v-text="comment.customer.nickName"></div>
									<div class="comment-time">
										<span v-if="comment.time.year>=1"><span v-text="comment.time.year"></span>年前</span>
										<span v-else-if="comment.time.month>=1"><span v-text="comment.time.month"></span>个月前</span>
										<span v-else-if="comment.time.day>=1"><span v-text="comment.time.day"></span>天前</span>
										<span v-else-if="comment.time.hour>=1"><span v-text="comment.time.hour"></span>小时前</span>
										<span v-else-if="comment.time.minute>=1"><span v-text="comment.time.minute"></span>分钟前</span>
										<span v-else>刚刚</span>
									</div>
									<div class="comment-content" v-text="comment.content"></div>
								</div>
								<div class="load-more" v-if="!isFin" v-cloak>
									<span class="loading">&nbsp;</span>
									<span class="text">正在加载</span>
								</div>
								<div class="load-finish" v-if="isFin && comments.length>0" v-cloak>没有更多了</div>
								<div class="load-finish no-comments" v-if="isFin && comments.length==0" v-cloak>暂时没有评论</div>
							</div>
						</div>
					</div>
					<div class="bottom-input" :class="isIOS&&isFocus?'not-focus':(!isIOS&&isFocus)?'focus':'not-focus'">
						<div class="rel">
							<textarea id="commentInput" rows="1" @focus="isFocus=true" @blur="commentBlur()" placeholder="说点什么吧~" v-model="commentContent" maxlength="100"></textarea>
							<button class="abs btn submit" @click="postComment()">发送</button>
							<button class="abs btn reset" v-show="isFocus" @click="commentContent=''">重置</button>
						</div>
					</div>
				</div>
			</swiper-slide>
			<!-- Optional controls -->
			<!-- <div class="swiper-pagination"	slot="pagination"></div> -->
			<!--<div class="swiper-button-prev" slot="button-prev"></div>-->
			<!--<div class="swiper-button-next" slot="button-next"></div>-->
			<!-- <div class="swiper-scrollbar"	 slot="scrollbar"></div> -->
		</swiper>
	</div>
</template>

<script>
	import echarts from 'echarts/lib/echarts';
	import 'echarts/lib/chart/radar';

	import ProductHeader from '@/components/product-header/product-header.vue';

	export default {
		name: 'detail',
		components: {
			ProductHeader
		},
		data(){
			return {
				detail:{}, //保险条款的各项属性,例如保险名称,得分,最大最小投保年龄等等
				remark:[], //该保险条款的六维度得分,用于echarts绘制雷达图
				averageRemark:[], //所有保险条款的平均得分,同上
				myChart: null, //存储雷达图的dom对象
				drawComplete: false,
				//eCharts的animation在画缺一个维度的雷达图时有bug,自己做生长动画
				notNextTick: true, //swiper特有的属性(创建后swiper后可以实时对swiper进行操作,而不必$nextTick)
				swiperOption: {
					direction : 'vertical',
					speed: 500,
					height: window.pageHeight,
					touchRatio: 1.3,
					autoHeight: true,
					resistanceRatio: 0.7,
					threshold: 80,
					debugger: true,
					// swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
					onTransitionStart(swiper){
						// console.log(swiper)
					}
				}, //swiper的配置项(方向速度等)
				popular:[], //搜了又搜列表
				comments: [], //评论列表
				totalPage: 0, //评论总页数
				totalRow: 0, //评论总条目数
				currentPage: 1, //评论当前页码
				loading: false, //标识当前是否正在加载更多,防止重复请求
				loadTimer: null, // 定时器,延迟加载更多
				isFin: true, //评论列表是否还能加载更多
				commentContent: '', //用户输入的评论内容
				commentsContainer: null, //评论div.rel容器的dom对象
				commentsTop: 0, //评论div.rel的scrollTop值
				touchY1: 0, //在评论列表里触摸滑动时的起始Y值
				touchY2: 0, //在评论列表里触摸滑动时的终止Y值
				isFocus: false, //评论输入框是否聚焦
				clicked: 0, //当前被点击的维度,
				isIOS: false //是否ios手机
			}
		},
		computed: {
			swiper() {
				return this.$refs.mySwiper.swiper;
			},
			// 动态计算评论列表容器的高度
			commentsHeight(){
				if(!this.commentsContainer){
					return 9;
				}
				let rem=parseInt(window.html.style.fontSize);
				let windowHeight=window.innerHeight/rem;
				return windowHeight-2.6-1.12+1.1;
			}
		},
		mounted(){
			// 为方便调试把this暴露在window对象下
			this.$pages.detail=this;
			this.ifIOS();
			this.getPopularSearch();
		},
		activated(){
			document.title='综合评价';
			this.$refs.mySwiper.swiper.slideTo(0,0,false);
			this.clicked=0;
			this.getEvaluation();
			this.stopPropagation();
			this.initLoadListener();
			this.forbidBack();
		},
		deactivated(){
			this.disposeCanvas();
			this.detail={};
			this.totalPage=0;
			this.currentPage=1;
			this.comments=[];
			this.isFin=false;
			this.loading=false;
			this.commentContent='';
			document.getElementById('commentInput').blur();
		},
		methods: {
			// 判断是否IOS手机
			ifIOS(){
				this.isIOS=(window.UA.indexOf('iphone')>-1 && window.UA.indexOf('apple')>-1);
			},
			// 2秒内禁止后退
			forbidBack(){
				window.forbidden=true;
				let that=this;
				window.setTimeout(function(){
					window.forbidden=false;
				},2000);
			},
			// 调接口获取指定id的综合评价
			getEvaluation(){
				let that=this;
				// let id=this.$route.query.id;
				let id=this.$util.getQueryString('id');
				if(!id){
					this.showToast('出错了(保险id为空)','warning');
					return;
				}
				let ifCached=this.ifCached(id);
				let detail=this.$store.detail;
				if(ifCached){
					detail.unshift(ifCached);
					detail=detail.slice(0,5);
					that.detail=ifCached;
					setTimeout(function(){
						if(that.$route.path!='/detail'){
							return;
						}
						that.processRadarData();
						that.drawLine();
						that.getComment();
					},100);
				} else {
					// 判断是否有customerId
					let customerId=this.$util.getCustomerId();
					if(!customerId){
						return;
					}
					this.$util.ajax('/evaluation/comprehensiveEvaluation','post',{
						customerId: customerId,
						insuranceId: id
					}).then(function(res){
						if(res.code=='100000'){
							that.$set(that,'detail',res.data);
							detail.unshift(res.data);
							detail=detail.slice(0,5);
							setTimeout(function(){
								if(that.$route.path!='/detail'){
									return;
								}
								that.processRadarData();
								that.drawLine();
								that.getComment();
								if (window.getNewTicket()){
									that.$util.shareEvaluation(that.detail.INSURANCE.PRODUCT_NAME);
								} else {
									setTimeout(function(){
										that.$util.shareEvaluation(that.detail.INSURANCE.PRODUCT_NAME);
									},500);
								}
							},100);
						} else if(res.code=='100001'){
							that.showToast(res.message,'error')
						}
					});
				}

			},
			// 获取url参数中的保险ID,先去$store中查询是否有缓存
			ifCached(id){
				let detail=this.$store.detail;
				if(detail.length==0){
					return false;
				}
				for(let i=0; i<detail.length; i++){
					let obj=detail[i];
					if(obj.INSURANCE.PRODUCT_ID==id){
						detail.splice(i);
						return obj;
						break;
					}
				}
			},
			// 处理数据,得到雷达图6维度的分数数组,然后调用drawLine函数
			processRadarData(){
				let detail=this.detail;
				this.remark=[];
				this.remark.push(
					detail.INSURANCE_COMPANY.SCORE,
					null, //价格维度暂时不做
					detail.SERVICE_MODE.SCORE,
					detail.POLICY_MANAGEMENT.SCORE,
					detail.POLICY_LIABILITY.SCORE,
					detail.DISEASE_DEFINITION.SCORE,
				);
				this.averageRemark=[];
				this.averageRemark.push(
					detail.INSURANCE_COMPANY.AVERAGE,
					null, //价格维度暂时不做
					detail.SERVICE_MODE.AVERAGE,
					detail.POLICY_MANAGEMENT.AVERAGE,
					detail.POLICY_LIABILITY.AVERAGE,
					detail.DISEASE_DEFINITION.AVERAGE,
				);
			},
			// 画雷达图
			drawLine(){
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById('myChart'));
				this.myChart = this.$refs.myChart;
				// 指定图表的配置项和数据
				let option = {
					tooltip: {
						trigger: 'axis'
					},
					animation: false,
					// animationDuration: 500,
					color: ['rgb(125,121,199)','rgb(17,255,45)'],
					radar: [
						{
							indicator: [
								{text: '', max: 100},
								{text: '', max: 100},
								{text: '', max: 100},
								{text: '', max: 100},
								{text: '', max: 100},
								{text: '', max: 100},
							],
							center: ['center','center'],
							axisLine: {
								lineStyle: {
									color: 'rgba(147, 255, 254, 0.3)'
								}
							},
							splitLine: {
								lineStyle: {
									color: 'rgba(147, 255, 254, 0.3)'
								}
							},
							splitArea: {//背景分割区域
								areaStyle: {
									color: ['transparent', 'transparent', 'transparent', 'transparent','transparent']
								}
							},
						}
					],
					series: [
						{
							type: 'radar',
							itemStyle: {
								normal: {areaStyle: {type: 'default'},
									lineStyle:{
										shadowColor:'rgba(0,0,0,0.5)',
										color: 'red'
									}
								}
							},
							data: [
								{
									value: this.averageRemark,
									name: '平均保险',
									areaStyle: {
										normal: {
											color: 'rgba(125,121,199,0.4)'
										}
									},
									lineStyle: {
										normal: {
											color: 'rgba(125,121,199,0.6)'
										}
									},
									symbol:'circle', //图标形状
									symbolSize:6,	//图标尺寸,
									color: 'rgba(125,121,199,0.6)'
								},
								{
									value: this.remark,
									name: '某保险',
									areaStyle: {
										normal: {
											color: 'rgba(17,255,45,0.2)'
										}
									},
									lineStyle: {
										normal: {
											color: 'rgba(17,255,45,0.4)'
										}
									},
									symbol:'circle', //图标形状
									symbolSize:6,	//图标尺寸,
									color: 'rgba(17,255,45,0.4)'
								}
							]
						},
					],
				};
				myChart.setOption(option);
				this.drawComplete=true;
			},
			// 销毁echarts实例
			disposeCanvas(){
				this.drawComplete=false;
				let that=this;
				echarts.dispose(that.myChart);
			},
			// 前往swiper的第二页
			goToPage2(){
				this.$refs.mySwiper.swiper.slideTo(1,500,false);
			},
			// 获取"搜了又搜"列表
			getPopularSearch(){
				let that=this;
				let customerId=this.$util.getCustomerId();
				if(!customerId){
					return;
				}
				this.$util.ajax('/insurance/associationSearch','post',{
					customerId: customerId
				}).then(function(res){
					if(res.code=='100000'){
						that.popular=res.data||[];
						if(that.popular!=null){
							let arr = that.popular.filter(function(i){
								return (i.insuranceId && i.insuranceName)
							});
							that.popular=arr.slice(0,2);
						}
					}
				})
			},
			// 跳转到其他保险综合评价
			goToDetail(id){
				this.$router.replace('/blank');
				let that=this;
				this.$nextTick(function(){
					that.$router.replace('/detail?id='+id);
				})
			},
			// 获取评论列表
			getComment(){
				let that=this;
				let customerId=this.$util.getCustomerId();
				this.$util.ajax('/insurance/comment/list','post',{
					insuranceId: that.detail.INSURANCE.PRODUCT_ID,
					pageStart: that.currentPage,
					pageSize: 10
				}).then(function(res){
					if(res.code=='100000'){
						that.totalPage=res.data.totalPage;
						that.totalRow=res.data.totalRow;
						let list=res.data.list;
						for(let i in list){
							list[i].time=that.$util.getOffsetTime(list[i].createTime);
						}
						console.log('评论列表↓');
						console.log(res.data.list);
						that.comments=that.comments.concat(list);
						if(that.currentPage<res.data.totalPage){
							that.isFin=false;
						} else {
							that.isFin=true;
						}
					}
				})
			},
			// 为搜索结果列表添加事件监听,滑动到底部时执行'加载更多'函数
			initLoadListener: function(){
				let that=this;
				let divEl=this.$refs.commentsContainer;
				let divChild=this.$refs.commentsChild;
				divEl.ontouchend=function(){
					if(that.isFin==true){
						return;
					}
					window.clearTimeout(that.loadTimer);
					that.loadTimer=window.setTimeout(that.loadMore,1200);
				};
			},
			// 加载更多搜索结果,如无更多,则让isFin=true
			loadMore: function(){
				let divEl=this.$refs.commentsContainer;
				let divChild=this.$refs.commentsChild;
				if(this.$route.path!='/detail'){
					return;
				}
				if(divEl.clientHeight+divEl.scrollTop<divChild.clientHeight-300){
					return;
				}
				let that=this;
				if(this.loading==false && this.currentPage<this.totalPage){
					this.loading=true;
					setTimeout(function(){
						that.currentPage++;
						that.getComment();
					},100);
				}
			},
			// 点击某一项得分时,路由跳转至该维度的详情页
			activateScore(index,atOnce){
				if(this.clicked!=0){
					return;
				}
				let that=this;
				let goToPayMonth=function(){
					that.$router.push('/pay-month');
				}
				if(this.detail.INSURANCE.IS_READ=='N' && index!=1){
					this.showAlert('您当前只能查看疾病定义维度哦，　成为包月会员，享受更多优质服务~',goToPayMonth,function(){},'去支付');
					return;
				}
				this.clicked=index;
				let defer;
				atOnce==true?defer=0:defer=2500;
				setTimeout(function(){
					that.$router.push('/score1?id='+that.detail.INSURANCE.PRODUCT_ID+'&score1='+index);
				},defer);
			},
			// 评论列表如果没翻到首部,阻止touchstart事件冒泡到swiper-slide(阻止swiper翻页)
			stopPropagation(){
				let that=this;
				this.commentsContainer=this.$refs.commentsContainer;
				let container=this.commentsContainer;
				let child=this.$refs.commentsChild;
				container.ontouchstart=function(e){
					e.stopPropagation();
					that.touchY1=e.changedTouches[0].pageY;
					that.commentsTop=container.scrollTop;
					document.getElementById('commentInput').blur();
					that.isFocus=false;
				}
				child.ontouchend=function(e){
					that.touchY2=e.changedTouches[0].pageY;
					if(that.touchY2-that.touchY1>200 && that.commentsTop==container.scrollTop){
						that.goToPage2();
					}
				}
			},
			// 评论输入框失去焦点时
			commentBlur(){
				let that=this;
				window.setTimeout(function(){
					that.isFocus=false
				},100)
			},
			// 提交评论
			postComment(){
				let content=this.commentContent.trim().replace(' ','').replace('\n','');
				this.commentContent=content;
				if(content.length<5){
					this.showToast('评论字数至少为5个字符','');
					return;
				}
				let that=this;
				let customerId=this.$util.getCustomerId();
				if(!customerId){
					return
				}
				let insuranceId=this.$route.query.id;
				let json={
					customerId,
					insuranceId,
					content
				}
				this.$util.ajax('/insurance/comment','post',json).then(function(res){
					if(res.code=='100000'){
						that.currentPage=1;
						that.totalPage=0;
						that.comments=[];
						that.getComment();
						that.commentContent='';
					}
				})
			}
		}
	}
</script>

<style scoped>
	.detail {
		background: url(../score1/image/bg.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.next-page {
		bottom: 0.5rem;
		width: 0.48rem;
		height: 0.37rem;
	}
	.next-page .rel {
		width: 0.48rem;
		height: 0.37rem;
	}
	.next-page .arrow-top	{
		width: 0.48rem;
		height: 0.24rem;
		background: url(./image/arrow-top.png);
		-webkit-background-size: contain;
		background-size: contain;
		animation: blink 2s 0.25s infinite;
	}
	.next-page .arrow-bot	{
		bottom: 0;
		width: 0.25rem;
		height: 0.12rem;
		background: url(./image/arrow-bot.png);
		-webkit-background-size: contain;
		background-size: contain;
		animation: blink 2s infinite;
	}
	@keyframes blink {
		from, to {
			opacity: 0;
		}
		40% {
			opacity: 0;
		}
		70% {
			opacity: 1;
		}
	}
	.product-header {
		position: relative;
	}
	.circle-bg{
		background:url(./image/circle.png) no-repeat ;
		background-size:contain;
		bottom:-1.67rem;
		width:7.5rem;
		height:9.43rem;
		z-index: -1;
	}
	.hint	{
		width: 100%;
		height: 0.3rem;
		top: 1.84rem;
		left: 0;
	}
	.hint .rel {
		width: 100%;
		height: 0.3rem;
		font-size: 0.2rem;
		line-height: 0.3rem;
		color: #e1f5ff;
	}
	.hint .rel span {
		display: inline-block;
	}
	.hint .rel span.color {
		width: 0.16rem;
		height: 0.16rem;
		margin-left: 0.3rem;
		margin-right: 0.04rem;
	}
	.hint .rel span.color.green {
		background: #5fe37c;
	}
	.hint .rel span.color.purple {
		background: #7467d3;
	}
	.detail-top{
		width:100%;
		height:2.1rem;
		background:url(./image/top_bg.png) no-repeat;
		background-size:cover;
	}
	.lab{
		font-size:0.24rem;
		color:#fff;
		text-align:center;
		line-height: 0.67rem;
		position:absolute;
	}
	#myChart {
		transform: scale(0);
		transition: all 1s;
	}
	#myChart.scale {
		transform: scale(1);
	}
	.price_friendliness{
		width:1.90rem;
		height:0.69rem;
		line-height: 0.72rem;
		background:url("./image/s.png") no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		left: 0.4rem;
		top:3.60rem;
	}
	.insurance_rating, .disease_friendlines, .policy_liability,	.service_friendliness{
		width:2.20rem;
		height:0.67rem;
		line-height: 0.7rem;
		background:url("./image/m.png") no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.policy_management{
		width:2.75rem;
		height:0.77rem;
		line-height: 0.8rem;
		background:url("./image/big.png") no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.insurance_rating{
		left:2.67rem;
		top:2.43rem;
	}
	.disease_friendlines{
		left:5.04rem;
		top:3.82rem;
	}
	.policy_liability{
		left:5.12rem;
		top:7.45rem;
	}
	.policy_management{
		left:2.56rem;
		top:8.95rem;
	}
	.service_friendliness{
		left:0.24rem;
		top:7.48rem;
	}
	.arrow1,.arrow2,.arrow3,.arrow4,.arrow5,.arrow6{
		position:absolute;
	}
	.arrow1{
		width:0.5rem;
		height:0.77rem;
		background:url("./image/r1.png") no-repeat;
		background-size: 100% 100%;
		left:1.30rem;
		top:4.28rem;
	}
	.arrow2{
		width:0.37rem;
		height:0.77rem;
		background:url("./image/r2.png") no-repeat;
		background-size: 100% 100%;
		left:3.67rem;
		top:3.08rem;
	}
	.arrow3{
		width:0.71rem;
		height:0.54rem;
		background:url("./image/r3.png") no-repeat;
		background-size: 100% 100%;
		left:5.67rem;
		top:4.47rem;
	}
	.arrow4{
		width:0.66rem;
		height:0.45rem;
		background:url("./image/r4.png") no-repeat;
		background-size: 100% 100%;
		left:5.69rem;
		top:7.06rem;
	}
	.arrow5{
		width:0.42rem;
		height:0.75rem;
		background:url("./image/r5.png") no-repeat;
		background-size: 100% 100%;
		left:3.39rem;
		top:8.26rem;
	}
	.arrow6{
		width:0.65rem;
		height:0.46rem;
		background:url("./image/r6.png") no-repeat;
		background-size: 100% 100%;
		left:1.20rem;
		top:7.08rem;
	}
	.block {
		transition: all 0.8s;
	}
	.block1 {
		width: 7.5rem;
		height: 2.78rem;
	}
	.block2 {
		width: 7.5rem;
		height: 2.78rem;
	}
	.block1.abs {
		top: 1.85rem;
	}
	.block2.abs {
		top: 5.1rem;
	}
	.block .title {
		transition: all 0.5s;
	}
	.block1 .title1 {
		width: 4.57rem;
		height: 0.98rem;
		left: 1.49rem;
		background: url(./image/title1.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.block2 .title2 {
		width: 4.57rem;
		height: 0.98rem;
		left: 1.49rem;
		background: url(./image/title2.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.score {
		width: 1.94rem;
		height: 1.94rem;
		z-index: 5;
		transition: all 0.8s;
	}
	.score .rel {
		width: 1.94rem;
		height: 1.94rem;
	}
	.score .border1 {
		background: url(./image/border1.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.score .border2 {
		background: url(./image/border2.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.score .border3 {
		background: url(./image/border3.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.score .border4 {
		background: url(./image/border4.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.score .bubble {
		background: url(./image/bubble.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.score1 {
		top: 0.89rem;
		left: 0.53rem;
	}
	.score2 {
		top: 0.89rem;
		left: 2.82rem;
	}
	.score3 {
		top: 0.89rem;
		left: 5.09rem;
	}
	.score4 {
		top: 0.89rem;
		left: 0.53rem;
	}
	.score5 {
		top: 0.89rem;
		left: 2.82rem;
	}
	.score6 {
		top: 0.89rem;
		left: 5.09rem;
	}
	.block.fade {
		opacity: 0;
	}
	.title.fade {
		opacity: 0;
	}
	.score.fade {
		opacity: 0;
		transition: all 0.3s;
	}
	.popular.fade {
		opacity: 0;
	}
	.block.active {
		top: 3.2rem;
	}
	.score.active {
		left: 2.82rem;
		transform: scale(1.6);
	}
	.score.active .border1{
		animation: anti-clockwise1 2s 0.5s ease-in-out;
		animation-fill-mode: forwards;
	}
	.score.active .border2{
		animation: clockwise 2s 0.5s ease-in-out;
		animation-fill-mode: forwards;
	}
	.score.active .border3{
		animation: anti-clockwise 2s 0.5s ease-in-out;
		animation-fill-mode: forwards;
	}
	.score.active .border4{
		animation: clockwise1 2s 0.5s ease-in-out;
		animation-fill-mode: forwards;
	}
	@keyframes clockwise {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(720deg);
		}
	}
	@keyframes clockwise1 {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(360deg);
		}
	}
	@keyframes anti-clockwise {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(-720deg);
		}
	}
	@keyframes anti-clockwise1 {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(-360deg);
		}
	}
	.score .rank {
		top: 0.6rem;
		width: 100%;
		margin: 0;
		text-align: center;
		font-size: 0.36rem;
		color: #00baff;
	}
	.score .rank .tail {
		font-size: 0.22rem;
	}
	.score .score-title {
		top: 1.2rem;
		width: 100%;
		margin: 0;
		text-align: center;
		font-size: 0.21rem;
		color: #86eaff;
	}
	.popular {
		width: 6.38rem;
		height: 2.24rem;
		background: rgba(17,47,133,0.2);
		border-radius: 0.18rem;
		border: #666 solid 0.01rem;
		left: 0.56rem;
		bottom: 0.5rem;
		font-size: 0.24rem;
		transition: all 0.5s;
	}
	.popular p{
		font-size: 0.24rem;
		color: #4da0df;
		margin: 0.2rem 0.3rem;
		background: url(./image/popular-border.png) right bottom no-repeat;
	}
	.popular .popular-item {
		height: 0.4rem;
		line-height: 0.4rem;
		font-size: 0.24rem;
		padding: 0 0.3rem;
		background: rgba(31,71,150,0.4);
		border-radius: 0.25rem;
		color: #6e90fe;
		padding-top: 0.05rem;
		padding-bottom: 0.05rem;
		margin-left: 0.4rem;
		margin-bottom: 0.1rem;
	}
	.comment-title {
		top: 1.8rem;
		width: 100%;
		height: 0.76rem;
		background: #0d2247;
		padding-left: 0.24rem;
		line-height: 0.76rem;
		font-size: 0.26rem;
		color: #a0c0ed;
	}
	.comments {
		top: 2.6rem;
		width: 100%;
	}
	.comments>.rel {
		width: 100%;
		-webkit-overflow-scrolling : touch;
		overflow-y: auto;
	}
	.comments .load-finish {
		position: relative;
		text-align: center;
		font-size: 0.3rem;
		color: #ccc;
		margin: 0.3rem 0 0 0;
		padding-bottom: 1.5rem;
		opacity: 0.8;
	}
	.comments .load-finish.no-comments {
		height: 7rem;
		padding-bottom: 0;
	}
	.comments .load-finish:before {
		content: '';
		display: block;
		position: absolute;
		top: 0.2rem;
		left: 1.25rem;
		width: 1.5rem;
		height: 0.01rem;
		background: #fff;
	}
	.comments .load-finish:after {
		content: '';
		display: block;
		position: absolute;
		top: 0.2rem;
		right: 1.25rem;
		width: 1.5rem;
		height: 0.01rem;
		background: #fff;
	}
	.comments .load-more {
		height: 0.5rem;
		font-size: 0.3rem;
		line-height: 0.5rem;
		margin: 0.3rem 0 0 0;
		padding-bottom: 1.5rem;
		text-align: center;
		color: #fff;
	}
	.comments .load-more .loading {
		display: inline-block;
		font-size: 0.3rem;
		width: 0.46rem;
		height: 0.46rem;
		background: url(./image/loading.gif) center center no-repeat;
		-webkit-background-size: 0.4rem 0.4rem;
		background-size: 0.4rem 0.4rem;
	}
	.comment-item:last-child {
		margin-bottom: 1.1rem;
	}
	.comment-item {
		width: 5.9rem;
		padding: 0.5rem 0.4rem 0.5rem 0;
		margin-left: 1.2rem;
		border-bottom: 0.01rem solid rgba(185,201,229,0.2);
		font-size: 0.3rem;
	}
	.comment-item .user-avatar {
		position: absolute;
		display: block;
		margin-left: -0.9rem;
		width: 0.7rem;
		height: 0.7rem;
		border-radius: 0.08rem;
	}
	.comment-item .user-name {
		display: inline-block;
		font-size: 0.3rem;
		color: #a0c0ed;
		margin-right: 0.46rem;
		padding-left: 0.1rem;
	}
	.comment-item .comment-time {
		display: inline-block;
		font-size: 0.26rem;
		color: #586e8d;
	}
	.comment-item .comment-content {
		margin-top: 0.22rem;
		padding-left: 0.1rem;
		font-size: 0.26rem;
		color: #a1b7d7;
	}
	.bottom-input {
		position: absolute;
		width: 100%;
		background: #0a3273;
		/*transition: top 0.5s;
		transition: bottom 0.5s;*/
		z-index: 10;
	}
	.bottom-input>.rel {
		width: 100%;
		box-sizing: border-box;
		padding: 0.12rem 0.4rem 0 0.2rem;
		z-index: 10;
	}
	.bottom-input.not-focus {
		bottom: 0;
	}
	.bottom-input.focus {
		z-index: 4;
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
		top: 0rem;
	}
	.bottom-input textarea {
		box-sizing: border-box;
		width: 5.8rem;
		height: 0.82rem;
		background: #afc9f7;
		border-radius: 0.06rem;
		border: none;
		resize: none;
		font-size: 0.32rem;
		color: #061b3e;
		line-height: 0.82rem;
		padding-left: 0.18rem;
		padding-right: 0.18rem;
		margin-top: 0.08rem;
		z-index: 4;
	}
	.bottom-input textarea::-webkit-input-placeholder{
    color: #aaa;
    opacity:0.8;
	}
	.bottom-input textarea:focus {
		height: 1.62rem;
		line-height: 0.56rem;
		outline: none;
	}
	.bottom-input .btn {
		width: 1.2rem;
		height: 0.82rem;
		font-size: 0.3rem;
		line-height: 0.26rem;
		bottom: 0.56rem;
		right: 0.2rem;
		z-index: 3;
		border: none;
		border-radius: 0.08rem;
		background: none;
		color: #fff;
		padding: 0;
	}
	.bottom-input textarea~.btn.submit{
		top: 0.22rem;
	}
	.bottom-input textarea:focus~.btn.submit{
		height: 0.75rem;
		top: 0.2rem;
	}
	.bottom-input textarea~.btn.reset{
		height: 0.75rem;
		top: 1.05rem;
	}
</style>
